<template>
  <div>
    <up-down-layout :header="'用户管理'" :handleFlag="true" >
      <template slot="query">
        <search-form :componentList="componentList" :formValue="queryParas" @handleFilter="handleFilter"
          @clearParam="clearParam">
        </search-form>
      </template>
      <template slot="table">
        <!-- table表格 -->
        <data-table :toolMenuFlag="true" @onCreateRow="addData" :sourceData="sourceData" :queryParas="queryParas"
          @onEditRow="onEditRow" :menuFlag="false" :IsRight="false" :operateBtnLayout="operateBtnLayout"
          :columns="columns" :deleteApi="api" :api="api" :loadCount="loadCount" :operatWidth="'130px'"
          >
        </data-table>
      </template>
    </up-down-layout>
    <userEdit :editModel="editModel" :visible.sync="dialogVisible" v-if="dialogVisible" :api="api" :form="item" @handSearch="handleFilter"/>
  </div>
</template>
<script>
import BaseManage from '@/pages/baseManage'
import upDownLayout from '@/components/element/upDownLayout'
import searchForm from '@/components/element/searchForm'
import DataTable from '@/components/element/DataTable'
import { sysUser } from '@/api/platformApi'
import userEdit from '@/pages/systemManage/userManage/userEdit'
import { formatDict } from '@/filters/index'
export default {
  // 继承baseManage里的公共方法和定义的属性
  extends: new BaseManage(),
  name: 'userManage',
  components: {
    upDownLayout,
    searchForm,
    DataTable,
    userEdit
  },
  data () {
    return {
      componentList: [
        {
          prop: 'no',
          componentName: 'el-input',
          label: '工号：',
          lableWidth: '70px',
          value: 'no',
          placeholder: '请输入工号'
        },
        {
          prop: 'name',
          componentName: 'el-input',
          label: '用户名：',
          lableWidth: '100px',
          value: 'name',
          placeholder: '请输入用户名'
        },
        {
          prop: 'officeId',
          componentName: 'cascaderOrg',
          label: '所属部门:',
          lableWidth: '100px',
          value: 'officeId'
        }
      ],
      queryParas: {
        no: '',
        name: '',
        officeId: ''
      },
      // talbe显示的每一项
      columns: [
        {
          prop: 'no',
          label: '工号',
          align: 'right',
          width: '60px'
        },
        {
          prop: 'name',
          label: '名称',
          align: 'left'
        },
        {
          prop: 'officeName',
          label: '归属部门',
          align: 'left'
        },
        {
          prop: 'adUser',
          label: 'AD域账号',
          align: 'left'
        },
        {
          prop: 'useable',
          label: '用户状态',
          align: 'center',
          width: '80px',
          format: row => { return formatDict(row.useable, 'userStatus') }
        },
        {
          prop: 'emil',
          label: '邮箱',
          align: 'center'
        },
        {
          prop: 'phone',
          label: '电话',
          align: 'center'
        }
      ],
      // 操作列需要显示的按钮
      operateBtnLayout: 'C,E,V,D'
    }
  },
  computed: {
    api () {
      return sysUser
    }
  },
  methods: {
  }
}
</script>
